<template>
  <div class="container">
    <h2>用户列表</h2>
    <hr/>
    <ul>
      <li>
        <span class="id" style="margin-right: 25px">ID</span>
        <span class="name">姓名</span>
        <span>操作</span>
      </li>
      <br>
      <li v-for="user in userList">
        <span class="id">{{ user.id }}</span>
        <span class="name">{{ user.name }}</span>
        <router-link :to="{ path: '/user/detail/' + user.id }">详情</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "UserList",
  components: {},
  data() {
    return {
      userList: [
        {id: 3, name: "张三"},
        {id: 4, name: "李四"},
        {id: 5, name: "王五"}
      ]
    }
  }
}
</script>

<style scoped>
li {
  list-style-type: none;
  margin-bottom: 5px;
}

.id, .name {
  margin-right: 30px;
}

a {
  text-decoration: none;
}
</style>
